<template>
  <div class="monthStatementBox">
    商品列表
    <el-card class="box-card">
      <el-form
        :inline="true"
        ref="formData"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
        style="margin-top: 25px"
      >
        <el-form-item label="商品：" prop="ProductID">
          <el-input
            v-model="formInline.ProductID"
            placeholder="商品编号/商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属店铺" prop="store">
          <el-input
            v-model="formInline.store"
            placeholder="店铺名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="formInline.CommodityType">
            <el-option label="类型一" value="类型一"></el-option>
            <el-option label="类型二" value="类型二"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select v-model="formInline.state">
            <el-option label="上架" value="上架"></el-option>
            <el-option label="下架" value="下架"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div v-loading="loading" class="monthStatementTable">
      <div class="itemDropDown">
        <div class="topLab">
          <div />
          <div class="rightLabBox">
            <a
              class="el-button fr el-button--primary el-button--mini"
              title="导出"
              @click="handleExport()"
              >导出</a
            >
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" row-key="id">
          <el-table-column
            prop="id"
            label="商品编号"
            center
            sortable
            style="width: 8%"
            align="center"
          />
          <el-table-column
            prop="store"
            label="所属店铺"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="ProductName"
            label="商品名称"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="CommodityType"
            label="商品类型"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="costPrice"
            label="成本价"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="originalPrice"
            label="原价"
            style="width: 6%"
            align="center"
            sortable
          />
          <el-table-column
            prop="salePrice"
            label="销售价"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="inventory"
            label="库存量"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="monthSales"
            label="月销量"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="TotalSales"
            label="总销量"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="MonthlySales"
            label="月销售额"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="AllTotalSales"
            label="总销售额"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="activity"
            label="参与活动"
            style="width: 8%"
            align="center"
            sortable
          />
          <el-table-column
            prop="likeCakes"
            label="热销"
            style="width: 6%"
            align="center"
            sortable
          />
          <el-table-column
            prop="recommended"
            label="推荐"
            style="width: 6%"
            align="center"
            sortable
          />
          <el-table-column prop="state" label="状态" style="width: 6%" sortable/>
          <el-table-column
            fixed="right"
            label="操作"
            style="width: 33%"
            align="center"
            sortable
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >{{scope.row.state ==='上架' ? '下架':'上架'}}</el-button
              >
              <el-button
                type="text"
                size="small"
                @click.native.prevent="deleteClick(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.page"
          :page-size="page.size"
          :page-sizes="[2, 3, 5, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @current-change="changePage"
          @size-change="changeSize"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchGoods,
  deleteGoodsn,
  queryGoodsn,
  editorGoodsn
} from '@/api/sharePBD'
import { queryFn } from '@/utils'
export default {
  name: 'Management-goods',

  data () {
    return {
      list: [],
      formInline: {
        ProductID: '',
        store: '',
        CommodityType: '',
        state: ''
      },
      rules: {
        ProductID: [
          {
            required: false, // 是否必填
            message: '编码不正确', // 规则提示
            trigger: 'blur' // 何事件触发
          },
          // 可以设置多重验证标准
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符'
          },
          {
            pattern: /^[0-9]*$/, // 匹配数字
            message: '编码只能为数字'
          }
        ]
      },
      page: {
        page: 1,
        size: 10,
        total: 11
      },
      falg: false,
      loading: false
    }
  },
  methods: {
    // 翻页
    async changePage (newPage) {
      this.page.page = newPage
      const obj = {
        _page: this.page.page,
        _limit: this.page.size
      }
      const newlist = await searchGoods(obj)
      // console.log(newSize)
      this.list = newlist.data
    },
    // 变换页面条数
    async changeSize (newSize) {
      this.page.size = newSize
      const obj = {
        _page: this.page.page,
        _limit: this.page.size
      }
      const newlist = await searchGoods(obj)
      console.log(newSize)
      this.list = newlist.data
    },
    // 商品信息
    async searchGoods () {
      try {
        const obj = {
          _page: 1,
          _limit: 10
        }
        const newlist = await searchGoods(obj)
        this.list = newlist.data
        console.log(this.list)
      } catch (error) {
        this.$message.fail('加载失败')
      }
    },
    // 删除产品
    async deleteClick (row) {
      try {
        this.$confirm('您确定删除该行业吗')
          .then(async () => {
            await deleteGoodsn(row.id)
            this.searchGoods()
            this.$message.success('删除成功')
          })
          .cancel()
      } catch (error) {
        console.log(error)
      }
    },
    // 查询
    async onSubmit () {
      const xxx = queryFn(this.formInline)
      const { data } = await queryGoodsn(xxx)
      this.list = data
      this.page.total = data.length
    },
    resetForm () {
      this.formInline.ProductID = ''
      this.formInline.store = ''
      this.formInline.CommodityType = ''
      this.formInline.state = ''
      this.searchGoods()
    },
    // 修改状态
    async handleClick (row) {
      const newlist = row
      if (this.falg === true) {
        newlist.state = '上架'
      } else if (this.falg === false) {
        newlist.state = '下架'
      }
      await editorGoodsn(newlist)
      this.searchGoods()
      this.falg = !this.falg
    },
    handleExport () {}
  },
  created () {
    this.searchGoods()
  }
  // 导出

}
</script>

<style lang="less" scoped>
.monthStatementBox {
  padding: 20px;
  /deep/ .el-card__body {
    display: flex;
    justify-content: space-evenly;
  }
  .monthStatementTop {
    position: relative;
    background: #fff;
    padding: 10px 15px 0 15px;
    border-bottom: solid 1px #f4f4f4;
    .title {
      color: #409eff;
      line-height: 40px;
      border-bottom: solid 2px #409eff;
      font-size: 18px;
      font-weight: bold;
      display: inline-block;
      padding: 0 25px;
      .yearChange {
        position: absolute;
        top: 5px;
        right: 10px;
      }
    }
  }
  .monthStatementTable {
    background: #fff;

    .itemTopLab {
      border-top: solid 1px #f0f0f0;
      border-bottom: solid 3px #ccc;
      padding: 15px;
      div {
        display: inline-block;
        padding: 0 58px;
        border-right: solid 1px #ccc;
      }
      div:last-child,
      div:first-child {
        border: none;
      }
      .lab {
        position: relative;
        top: -15px;
        padding-right: 0;
        padding-left: 15px;
      }
      .labTit {
        cursor: pointer;
      }
      .title {
        font-size: 16px;
        margin: 10px 0;
        span {
          position: relative;
          bottom: -2px;
          font-size: 13px;
          color: #999;
          margin-left: 5px;
        }
      }
      .itemTit {
        color: #999;
        margin: 8px 0;
        font-size: 13px;
      }
      .itemNum {
        font-size: 20px;
        margin: 0;
      }
    }
    .itemDropDown {
      width: 100%;
      background: #fff;
      .topLab {
        position: relative;
        padding: 15px;
        text-align: center;
        div {
          display: inline-block;
          margin: 0 10px;
          text-align: center;
          span {
            display: inline-block;
            position: relative;
            top: 2px;
            margin-right: 5px;
            width: 15px;
            height: 15px;
            background: #a8f8bb;
          }
        }
        .rightLabBox {
          position: absolute;
          right: -10px;
          top: 10px;
          div {
            border: solid 1px #30b08f;
            color: #30b08f;
            border-radius: 3px;
            padding: 4px 10px;
            font-size: 14px;
          }
        }
      }
      .act {
        border-bottom: solid 3px #30b08f;
        .lab {
          color: #30b08f;
        }
        .labTit {
          color: #30b08f;
        }
      }
    }
    .itemes:hover {
      background: #fafbff;
    }
    .itemes .lab:hover {
      cursor: pointer;
    }
  }
  .butList {
    border-top: solid 1px #f4f4f4;
    text-align: center;
    background: #fff;
    span {
      display: inline-block;
      background: #a8f8bb;
      color: #fff;
      padding: 8px 20px;
      border-radius: 3px;
      margin: 10px;
      cursor: pointer;
    }
    .cancel {
      background: #ccc;
      color: #666;
    }
  }
  .block {
    display: flex;
    justify-content: center;
    /deep/.el-input__inner {
      width: 100px;
    }
  }
}
</style>
